<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px" style="display: flex;">
      <el-form-item label="车牌号码">
        <el-input v-model="inputNum" placeholder="请输入车牌号码" />
      </el-form-item>
      <el-form-item label="缴费状态">
        <el-input v-model="inputNum" placeholder="请输入车主姓名" />
      </el-form-item>
      <el-button style="height: 40px;margin-left: 10px;">添加月卡</el-button>
    </el-form>
    <template>
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column prop="id" label="序号" width="120" />
        <el-table-column prop="carNumber" label="车牌号码" width="120" />
        <el-table-column prop="chargeType" label="收费类型" show-overflow-tooltip>
          <template v-slot="{ row }">
            <span v-if="row.chargeType==='temp'">临时停车</span>
            <span v-else>月卡</span>
          </template>
        </el-table-column>
        <el-table-column prop="parkingTime" label="停车总时长" show-overflow-tooltip />
        <el-table-column prop="actualCharge" label="缴纳费用(元)" show-overflow-tooltip />
        <el-table-column prop="paymentStatus" label="缴纳状态" width="120" show-overflow-tooltip>
          <template v-slot="{ row }">
            <span v-if="row.paymentStatus ===1">已缴纳</span>
            <span v-else>未缴纳</span>
          </template>
        </el-table-column>
        <el-table-column prop="paymentMethod" label="缴纳方式" show-overflow-tooltip>
          <template v-slot="{ row }">
            <span v-if="row.paymentMethod === 'Alipay'">支付宝</span>
            <span v-else>xxx</span>
          </template>
        </el-table-column>
        <el-table-column prop="paymentTime" label="缴纳时间" show-overflow-tooltip />
      </el-table>
    </template>
  </div>
</template>

<script>
import { getPaymentList } from '@/api/payment'
export default {
  data() {
    return {
      params: {
        name: '',
        page: 1,
        pageSize: 10
      },
      form: {

      },
      inputNum: '',
      tableData: []
    }
  },
  created() {
    this.getPaymentList()
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    async getPaymentList() {
      const res = await getPaymentList(this.params)
      console.log(res)
      this.tableData = res.rows
    }
  }

}
</script>

<style>
.clearfix {
    display: flex;

}
</style>
